<template>
  <div class="wrap">
    <!-- <el-scrollbar style="height:95vh;"> -->
    <el-card style="height: 20%;">
      <el-form
        style="width: 100%; margin-top: 1%"
        ref="photovoltaic"
        label-width="130px"
        size="mini"
      >
        <el-row type="flex">
          <el-col :span="6">
            <el-form-item label="调度机构:">
              <el-select
                v-model="maintenanceForm.regulationOrgId"
                placeholder="请选择"
                :popper-append-to-body="false"
                style="width: 85%"
                @change="regulationOrgChange(maintenanceForm.regulationOrgId)"
              >
                <el-option
                  v-for="item in dispatchList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <FuzzyQueryInput
              @inputChange="inputChange_1"
              @handleClear="handleClear_1"
              ref="stationRef"
              :api="queryStationNameList"
              labelText="聚合商:"
              :style="{ width: '100%' }"
            />
          </el-col>
          <el-col :span="6" style="margin-left: 3%">
            <FuzzyQueryInput
              @inputChange="inputChange_2"
              @handleClear="handleClear_2"
              ref="stationRef2"
              :api="queryUnitsNameList"
              :isDisabled="disabledUnits"
              labelText="聚合商控制单元:"
              :style="{ width: '100%' }"
            />
          </el-col>
          <!-- <el-col :span="4" style="margin-left: 100px">
            <el-link type="primary" size="mini" @click="onlineMonitor"
              >在线监测</el-link
            >
            <i class="el-icon-document" style="margin-left: 5px"></i>
          </el-col> -->
          <!-- <el-col :span="6">
            <el-form-item label="操作类型:">
              <el-select
                v-model="maintenanceForm.operateType"
                placeholder="请选择操作类型"
                clearable
              >
                <el-option
                  v-for="item in operationTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row type="flex">
          <el-col :span="8">
            <el-form-item label="时间区间:">
              <el-date-picker
                v-model="maintenanceForm.beginningAndEndingTime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="margin-left: 90px">
            <el-button
              type="primary"
              size="mini"
              style="margin: 1px 0 0 3%"
              @click="searchOrder"
              >检索</el-button
            >
            <el-button size="mini" @click="resetSearchList">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px;height: 77%;margin-bottom: 20px">
      <CleanForm
        :showColumnHandle="false"
        :searShow="true"
        :showColumnSetting="false"
        :showCheckbox="false"
        :showIndex="true"
        :showExportBtn="false"
        :field-list="fieldList"
        :api="getOnlineRawData"
        :queryParam="maintenanceForm"
        tableOptionWidth="100"
        ref="maintenanceFormTable"
        :page="false"
        :dialogPage="true"
        :btnShow="true"
        :outLoad="false"
        :tableHeight="'500px'"
      >
        <!-- :dialogPage = "true" -->
      </CleanForm>
    </el-card>
    <!-- </el-scrollbar> -->
    <!-- 查看弹框 -->
    <!-- <el-dialog width="70%" :visible.sync="dialogFormVisible"> -->
    <detail-info
      :fileId="fileId"
      :dialogVisible="dialogFormVisible"
      :ke="key"
      @close="closeDetail"
    ></detail-info>
    <!-- </el-dialog> -->
  </div>
</template>

<script>
import { getOnlineRawData } from '@/api/maintenanceRecord'
import {
  operateList,
  queryStationNameList,
  queryUnitsNameList,
  regulationOrgList,
} from '@/api/dict'
import DetailInfo from '../rawData/dataInfo/detail.vue'
export default {
  name: 'QydnWebIndex',
  components: { DetailInfo },

  data() {
    let timeForamat = (row) => {
      // console.log(row.operateTime)
      // console.log(this.$dayjs(row.operateTime).format('YYYY-MM-DD HH:mm:ss'))
      return this.$dayjs(row.startTime).format('YYYY-MM-DD HH:mm:ss')
    }
    let timeForamat1 = (row) => {
      // console.log(row.operateTime)
      // console.log(this.$dayjs(row.operateTime).format('YYYY-MM-DD HH:mm:ss'))
      return this.$dayjs(row.endTime).format('YYYY-MM-DD HH:mm:ss')
    }
    return {
      getOnlineRawData,
      queryStationNameList,
      queryUnitsNameList,
      dispatchList: '', //总调
      fileId: '', //查看携带的参数
      key: 1,
      maintenanceForm: {
        stationId: '',
        unitsNumber: '',
        regulationOrgId: '',
        searchBeginTime: [],
        startTime: '',
        endTime: '',
      },
      dialogFormVisible: false, //查看弹框
      operationTypeList: [
        {
          label: '增加',
          value: '1',
        },
        {
          label: '删除',
          value: '2',
        },
        {
          label: '编辑',
          value: '3',
        },
        {
          label: '查询',
          value: '4',
        },
      ],
      fieldList: [
        { name: '聚合商', value: 'stationName', noSort: true },
        { name: '聚合控制单元', value: 'unitsNumber', noSort: true },
        {
          name: '数据开始时间',
          value: 'startTime',
          noSort: true,
          formatter: timeForamat,
        },
        {
          name: '数据结束时间',
          value: 'endTime',
          noSort: true,
          formatter: timeForamat1,
        },
        // { name: '操作人', value: 'operatePerson', noSort: true },
        // { name: '操作内容', value: 'operateContent', noSort: true },
        // { name: '操作类型', value: 'operateTypeName', noSort: true },
        {
          name: 'P-F曲线',
          value: 'result',
          order: 'waveFile',
          noSort: true,
          type: 'check',
          clickCheck: this.doCheck,
        },
      ],
    }
  },
  created() {
    this.getOperateList()
    this.regulationOrgList()
  },
  mounted() {
    this.searchOrder()
  },

  computed: {
    disabledUnits() {
      return this.maintenanceForm.stationId == ''
    },
  },

  methods: {
    closeDetail(val) {
      this.dialogFormVisible = val
    },
    //调度机构change
    regulationOrgChange(val) {
      if (val) {
        this.$set(this.maintenanceForm, 'stationId', '')
        this.$refs.stationRef.value = ''
        this.$set(this.maintenanceForm, 'unitsNumber', '')
        this.$refs.stationRef2.value = ''
      }

      queryStationNameList({ regulationOrgId: val }).then((res) => {
        this.$refs.stationRef.queryInputList = res.data
        this.$refs.stationRef.queryInputListCopy = JSON.parse(
          JSON.stringify(res.data)
        )
      })
      // queryUnitsNameList({ regulationOrgId: val }).then((res) => {
      //   this.$refs.stationRef2.queryInputList = res.data
      //   this.$refs.stationRef2.queryInputListCopy = JSON.parse(
      //     JSON.stringify(res.data)
      //   )
      // })
    },
    // 聚合商
    inputChange_1(val) {
      //console.log(val, '搜索下拉框val')
      this.$set(this.maintenanceForm, 'stationId', val)

      // 聚合商单位接口
      queryUnitsNameList({
        regulationOrgId: this.maintenanceForm.regulationOrgId,
        stationId: val,
      }).then((res) => {
        this.$refs.stationRef2.queryInputList = res.data
        this.$refs.stationRef2.queryInputListCopy = JSON.parse(
          JSON.stringify(res.data)
        )
      })

      this.$refs.stationRef.queryInputList =
        this.$refs.stationRef.queryInputListCopy
    },
    handleClear_1() {
      this.$set(this.maintenanceForm, 'stationId', '')
    },
    // 聚合商单位
    inputChange_2(val) {
      //console.log(val, '搜索下拉框val')
      this.$set(this.maintenanceForm, 'unitsNumber', val)
      this.$refs.stationRef2.queryInputList =
        this.$refs.stationRef2.queryInputListCopy
    },
    handleClear_2() {
      this.$set(this.maintenanceForm, 'unitsNumber', '')
    },

    // 总调下拉框的数据
    async regulationOrgList() {
      await regulationOrgList().then((res) => {
        if (res.code === '000000') {
          this.dispatchList = res.data
        }
      })
    },
    // 获取操作类型字典
    async getOperateList() {
      const res = await operateList()
      this.operationTypeList = res.data
      // console.log(res)
    },
    // 最外部检索按钮
    searchOrder() {
      // console.log(this.maintenanceForm)
      if (this.maintenanceForm.beginningAndEndingTime) {
        this.maintenanceForm.startTime = this.$dayjs(
          this.maintenanceForm.beginningAndEndingTime[0]
        ).format('YYYY-MM-DD HH:mm:ss')
        this.maintenanceForm.endTime = this.$dayjs(
          this.maintenanceForm.beginningAndEndingTime[1]
        ).format('YYYY-MM-DD HH:mm:ss')
        // delete this.maintenanceForm.beginningAndEndingTime
      } else {
        this.maintenanceForm.startTime = ''
        this.maintenanceForm.endTime = ''
      }
      //   // this.maintenanceForm.searchBeginTime = ''
      //   // this.maintenanceForm.searchEndTime = ''

      //   console.log(this.maintenanceForm)
      this.$nextTick(() => {
        this.$refs.maintenanceFormTable.getDataInit()
      })
      // console.log(this.$dayjs(this.maintenanceForm.beginningAndEndingTime[0]).format('YYYY-MM-DD HH:mm:ss'))
    },
    // 检索重置
    resetSearchList() {
      for (let key in this.maintenanceForm) {
        this.maintenanceForm[key] = ''
      }
      this.$refs.stationRef.value = ''
      this.$refs.stationRef2.value = ''
      this.$refs.maintenanceFormTable.getDataInit()
    },

    // 跳转在线监测页面
    onlineMonitor() {
      this.$router.push('/onlineMonitor')
    },

    // P-F曲线查看弹框
    doCheck(val) {
      //console.log(val, 'jjjkkk')
      this.fileId = val.waveFile
      console.log(this.fileId + '===')
      if (val.waveFile == null || val.waveFile == undefined) {
        this.$message.error('fileId为空')
      } else {
        this.dialogFormVisible = true
        this.key++
      }
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-card__body{
    height: 100%;
}
// .el-card{
//   height: 100%;
// }
.wrap {
  width: 100%;
  height: 100%;
}

::v-deep .el-card {
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: visible !important; //溢出不隐藏   隐藏的话，下拉框看不到全部数据
  color: #303133;
  transition: 0.3s;
}
</style>
